.container {
  width: 1000px;
  margin: 30px auto;
  background-color: #ddd;
  display: grid;

  // 使用 min-content 和 max-content
  // grid-template-rows: repeat(2, min-content);
  // grid-template-columns: max-content 1fr 1fr min-content;

  // 使用 minmax 函数
  grid-template-rows: repeat(2, minmax(150px, min-content));
  grid-template-columns: minmax(200px, 300px) repeat(3, 1fr);

  .item {
    padding: 20px;
    color: white;
    font-family: sans-serif;
    font-size: 30px;
    background-color: orangered;

    &--1 {
      background-color: orangered;
    }
    &--2 {
      background-color: yellowgreen;
    }
    &--3 {
      background-color: blueviolet;
    }
    &--4 {
      background-color: palevioletred;
    }
    &--5 {
      background-color: royalblue;
    }
    &--6 {
      background-color: goldenrod;
    }
    &--7 {
      background-color: crimson;
    }
    &--8 {
      background-color: darkslategray;
    }
  }
}
